<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />

	<title>CodeProject.AI Explorer</title>

	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="expires" content="Mon, 22 Jul 2002 11:12:01 GMT">

    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">

    <link id="bootstrapCss" rel="stylesheet" type="text/css" href="assets/bootstrap-dark.min.css">
    <link rel="stylesheet" type="text/css" href="assets/server.css?v=2.9.4">

    <script type="text/javascript" src="assets/server.js?v=2.9.4"></script>
    <script type="text/javascript" src="assets/explorer.js?v=2.9.4"></script>

	<!-- Will only be effective if you're connected to the internet -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600&display=swap" rel="stylesheet">

	<style>
		.timing-table {
			margin-top:1rem;
		}
			.timing-table td {
				font-size: 80%;
				padding-right: 1rem;
			}
	</style>

	<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function (event) {
		serviceUrl.value           = apiServiceUrl;
		serviceTimeoutSecTxt.value = serviceTimeoutSec;

		// showInfo("Searching", "Searching for API Server...");
		setInterval(ping, pingFrequencySec * 1000);
		getVersion();

		// For ongoing update operations we will do an initial call to get the update, then wait 5
		// seconds in case things took a while to start up, then settle on a regular cadence. We 
		// want to balance instant availability with not flooding logs

		getModuleUis();
		setTimeout(getModuleUis, serverWarmupSec * 1000);
		setInterval(getModuleUis, updateModuleUiFreqSec * 1000);

		setBenchmarkCustomList()									
		setTimeout(setBenchmarkCustomList, serverWarmupSec * 1000);
		setInterval(setBenchmarkCustomList, customModelUpdateFreqSec * 1000);
		
		initVideoDemo();
        
        // Initial state of model selection based on default radio selection
        toggleModelSelection();
	});
	</script>

</head>

<body class="dark-mode explorer">
	<div>
		<div class=" mx-auto p-3" style="max-width:1100px;">

			<div class="w-100 header d-flex justify-content-start">
				<a href="https://www.codeproject.com" style="margin:2px 0 2px 5px">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
						 xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" role="img"
						 style="height: 60px; margin-right: -12px;">
						<title>CodeProject Icon</title>
						<path id="svg_2" d="M9.052,21.798c-0.236,0-0.459-0.905-0.463-1.145c-0.007-0.356,0.038-0.755,0.473-0.755
		c0.436,0,0.47,0.398,0.473,0.755C9.542,20.982,9.288,21.798,9.052,21.798z M10.903,23.985c0.729,0.004,3.677,0.151,3.715-0.847
		c0.041-0.998-1.401-1.525-2.234-1.563c-0.837-0.037-2.143,0.467-2.431,0.209c-0.377-0.339,0.281-1.882,0.531-2.188
		c0.172-0.205,0.453-0.524,0.606-0.664c0.594-0.553,0.967-1.32,0.964-2.178c-0.004-0.939-0.281-1.278,0.658-0.531
		c0.325,0.257,0.768,0.59,1.336,0.854c1.139,0.524-1.319-1.68-1.789-2.102c-0.788-0.699-1.045-1.08-0.609-1.354
		c0.346-0.216,0.672-0.459,0.977-0.723c1.196-1.035,2.046-2.605,1.878-4.896C14.354,5.911,10.416,0.024,9.364,0
		c-0.85-0.017-2.578,2.108-3.527,3.257C4.809,4.505,3.201,6.665,2.879,7.934C2.783,8.311,2.746,8.708,2.746,9.113
		c0,1.44,0.75,2.784,1.898,3.744c0.703,0.586,1.481,1.039,0.237,2.311c-0.74,0.758-2.434,2.361-1.453,1.909
		c0.572-0.264,1-0.614,1.34-0.854c0.709-0.504,0.99-0.669,0.833-0.031c-0.034,0.134-0.028,0.274-0.028,0.411
		c0,0.892,0.37,1.69,0.95,2.277c0.151,0.154,0.586,0.486,0.833,0.699c0.586,0.507,1.196,1.865,0.816,2.204
		c-0.288,0.258-1.594-0.246-2.427-0.209c-0.836,0.038-2.275,0.565-2.238,1.563s3.17,0.851,3.9,0.857
		c1.645,0.013,1.09-0.642,1.645-0.631C9.607,23.379,9.052,23.976,10.903,23.985z" />
						<path id="svg_3" fill="#C3DE6C" d="M9.802,1.187c-0.668-0.017-1.686,1.878-2.43,2.863C6.567,5.115,5.354,7.004,5.1,8.091
		C5.025,8.414,4.997,8.753,4.997,9.099c0,2.51,2.481,4.608,4.792,4.608c1.155,0,2.132-0.604,2.938-1.368
		c0.935-0.888,1.597-2.232,1.47-4.193C14.076,6.36,10.622,1.207,9.802,1.187z" />
						<path id="svg_4" d="M10.649,10.378c0.336,0.456,0.716,0.775,1.172,0.775c0.919,0,1.662-1.187,1.662-2.646
		c0-1.464-0.743-2.65-1.662-2.65c-0.456,0-0.85,0.309-1.172,0.775C10.491,6.86,10.2,7.042,9.823,6.401
		c-0.35-0.593-0.918-0.922-1.508-0.922c-1.179,0-2.135,1.412-2.135,3.154s0.956,3.154,2.135,3.154c0.737,0,1.371-0.556,1.769-1.389
		C10.238,10.073,10.47,10.135,10.649,10.378z" />
						<path id="svg_5" fill="#FFFFFF" d="M9.812,8.633c0,1.221-0.671,2.211-1.497,2.211c-0.826,0-1.498-0.991-1.498-2.211
		c0-1.224,0.672-2.215,1.498-2.215C9.141,6.418,9.812,7.409,9.812,8.633z" />
						<path id="svg_6" fill="#FFFFFF" d="M12.987,8.506c0,1.025-0.521,1.854-1.166,1.854c-0.641,0-1.162-0.83-1.162-1.854
		c0-1.029,0.521-1.858,1.162-1.858C12.465,6.648,12.987,7.478,12.987,8.506z" />
						<path id="svg_7" fill="#C3DE6C" d="M11.564,16.813c0,1.217-0.99,2.201-2.218,2.201c-1.227,0-2.221-0.984-2.221-2.201
		s0.994-2.205,2.221-2.205C10.574,14.608,11.564,15.597,11.564,16.813z" />
						<path id="svg_8" d="M9.877,17.434c0,0.229-0.188,0.415-0.418,0.415s-0.418-0.186-0.418-0.415S9.23,17.02,9.459,17.02
		S9.877,17.204,9.877,17.434z" />
						<path id="svg_9" d="M2.311,17.358c-0.165,0-1.687,0.021-2.163,0.227c-0.473,0.209,0.285,0.507,0.929,0.545
		c0.322,0.021,0.219,0.257,0.075,0.452c-1.155,1.581-0.264,1.262,0.514,0.565c0.192-0.171,0.264,0.056,0.284,0.265
		c0.018,0.206,0.511,1.749,0.665-0.209c0.062-0.81,0.113-1.241,0.076-1.525C2.653,17.396,2.499,17.358,2.311,17.358z" />
						<path id="svg_10" fill="#C3DE6C" d="M8.037,22.837c-0.284-0.527-1.063-0.452-1.422-0.395c-0.36,0.056-1.724,0.374-1.498,0.771
		c0.229,0.395,1.1,0.433,1.765,0.151C7.543,23.08,8.37,23.451,8.037,22.837z" />
						<path id="svg_11" d="M15.169,17.358c0.161,0,1.686,0.021,2.163,0.227c0.473,0.209-0.285,0.507-0.933,0.545
		c-0.319,0.021-0.216,0.257-0.075,0.452c1.158,1.581,0.267,1.262-0.511,0.565c-0.192-0.171-0.264,0.056-0.284,0.265
		c-0.021,0.206-0.515,1.749-0.665-0.209c-0.063-0.81-0.113-1.241-0.076-1.525C14.827,17.396,14.977,17.358,15.169,17.358z" />
						<path id="svg_12" fill="#C3DE6C" d="M10.086,22.837c0.284-0.527,1.063-0.452,1.423-0.395c0.359,0.056,1.728,0.374,1.497,0.771
		c-0.226,0.395-1.1,0.433-1.765,0.151C10.581,23.08,9.754,23.451,10.086,22.837z" />
						<path id="svg_13" d="M8.915,8.547c0,0.607-0.236,1.101-0.524,1.101c-0.288,0-0.521-0.494-0.521-1.101S8.103,7.447,8.39,7.447
		C8.678,7.447,8.915,7.94,8.915,8.547z" />
						<path id="svg_14" d="M12.291,8.455c0,0.483-0.188,0.877-0.418,0.877s-0.418-0.394-0.418-0.877c0-0.487,0.188-0.881,0.418-0.881
		S12.291,7.968,12.291,8.455z" />
					</svg>
				</a>

                <a href="https://www.codeproject.github.io/codeproject.ai" style="margin:0px 5px 0 0">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 860 160" height="60px">
                <defs><style>.cls-1{fill:#fff;}.cls-2{fill:#b3ddca;}</style></defs>
                <g><title>CodeProject.AI</title>
                <path id="svg_1" class="cls-1" d="M 747.22 160.94 L 775.79 73.19 L 789.94 73.19 L 818.51 160.94 L 807.51 160.94 L 798.7 134.67 L 766.99 134.67 L 758.17 160.94 L 747.22 160.94 Z M 770.17 124.94 L 795.57 124.94 L 782.87 86.94 L 770.17 124.94 Z" fill="#231f20"></path><path id="svg_2" class="cls-1" d="M 817.73 160.94 L 817.73 73.22 L 828.73 73.22 L 828.73 160.94 L 817.73 160.94 Z" fill="#231f20"></path><rect x="756.7" width="22.1" height="11.6" style="stroke-opacity: 0.33; fill: rgb(179, 221, 202); fill-opacity: 0.33;" y="39"></rect><rect x="344.3" width="22.1" height="11.6" style="stroke-opacity: 0.33; fill: rgb(179, 221, 202); fill-opacity: 0.33;" y="32.4" transform="matrix(0, -1, 1, 0, 812.650024, 436.350006)"></rect><rect x="803.6" width="22.1" height="11.6" style="stroke-opacity: 0.33; fill: rgb(179, 221, 202); fill-opacity: 0.33;" y="185.3"></rect><rect x="344.3" width="22.1" height="11.6" style="stroke-opacity: 0.33; fill: rgb(179, 221, 202); fill-opacity: 0.33;" y="32.4" transform="matrix(0, -1, 1, 0, 693.309998, 510.269989)"></rect><polygon id="svg_4" class="cls-2" points="737.24 94.01 725.71 94.01 725.71 40 756.66 40 756.66 51.53 737.24 51.53 737.24 94.01" fill="#b3ddca"></polygon><polygon id="svg_5" class="cls-2" points="779.72 197.92 725.71 197.92 725.71 166.97 737.24 166.97 737.24 186.39 779.72 186.39 779.72 197.92" fill="#b3ddca"></polygon><polygon id="svg_6" class="cls-2" points="856.65 197.92 825.7 197.92 825.7 186.39 845.12 186.39 845.12 143.91 856.65 143.91 856.65 197.92" fill="#b3ddca"></polygon><polygon id="svg_7" class="cls-2" points="856.65 70.95 845.12 70.95 845.12 51.53 802.64 51.53 802.64 40 856.65 40 856.65 70.95" fill="#b3ddca"></polygon><path d="M 44.978 109.764 Q 39.008 112.918 30.109 112.918 Q 18.619 112.918 11.71 105.521 Q 4.801 98.124 4.801 86.108 Q 4.801 73.192 12.573 65.231 Q 20.346 57.271 32.286 57.271 Q 39.946 57.271 44.978 59.486 L 44.978 66.207 Q 39.195 62.978 32.211 62.978 Q 22.937 62.978 17.173 69.174 Q 11.409 75.369 11.409 85.733 Q 11.409 95.571 16.797 101.409 Q 22.186 107.248 30.935 107.248 Q 39.045 107.248 44.978 103.644 Z M 75.579 112.918 Q 64.127 112.918 57.237 105.371 Q 50.347 97.824 50.347 85.733 Q 50.347 72.741 57.368 65.006 Q 64.39 57.271 76.481 57.271 Q 87.633 57.271 94.448 64.781 Q 101.263 72.29 101.263 84.419 Q 101.263 97.598 94.279 105.258 Q 87.295 112.918 75.579 112.918 Z M 76.03 62.978 Q 67.544 62.978 62.25 69.099 Q 56.955 75.219 56.955 85.17 Q 56.955 95.12 62.118 101.184 Q 67.281 107.248 75.579 107.248 Q 84.441 107.248 89.548 101.466 Q 94.654 95.683 94.654 85.282 Q 94.654 74.618 89.698 68.798 Q 84.741 62.978 76.03 62.978 Z M 111.85 112.017 L 111.85 58.172 L 126.72 58.172 Q 155.182 58.172 155.182 84.419 Q 155.182 96.885 147.278 104.451 Q 139.374 112.017 126.119 112.017 Z M 118.159 63.879 L 118.159 106.31 L 126.194 106.31 Q 136.783 106.31 142.678 100.64 Q 148.573 94.97 148.573 84.569 Q 148.573 63.879 126.57 63.879 Z M 194.308 112.017 L 165.771 112.017 L 165.771 58.172 L 193.106 58.172 L 193.106 63.879 L 172.079 63.879 L 172.079 81.79 L 191.529 81.79 L 191.529 87.46 L 172.079 87.46 L 172.079 106.31 L 194.308 106.31 Z" transform="matrix(1.388561, 0, 0, 1.435642, 0.528885, 0.973957)" style="fill: rgb(255, 255, 255); white-space: pre;"></path><path d="M 215.902 93.468 L 215.902 112.017 L 203.774 112.017 L 203.774 58.172 L 222.774 58.172 Q 243.125 58.172 243.125 75.332 Q 243.125 83.442 237.286 88.455 Q 231.447 93.468 221.685 93.468 Z M 215.902 67.484 L 215.902 84.268 L 220.671 84.268 Q 230.358 84.268 230.358 75.782 Q 230.358 67.484 220.671 67.484 Z M 296.18 112.017 L 282.249 112.017 L 273.876 98.161 Q 272.937 96.584 272.073 95.345 Q 271.21 94.106 270.327 93.224 Q 269.445 92.341 268.488 91.872 Q 267.53 91.403 266.404 91.403 L 263.137 91.403 L 263.137 112.017 L 251.009 112.017 L 251.009 58.172 L 270.234 58.172 Q 289.834 58.172 289.834 72.816 Q 289.834 75.632 288.97 78.017 Q 288.107 80.401 286.53 82.316 Q 284.953 84.231 282.719 85.62 Q 280.484 87.009 277.743 87.798 L 277.743 87.948 Q 278.945 88.324 280.071 89.169 Q 281.198 90.013 282.249 91.14 Q 283.301 92.266 284.258 93.562 Q 285.216 94.857 286.004 96.096 Z M 263.137 67.259 L 263.137 82.241 L 268.394 82.241 Q 272.299 82.241 274.664 79.988 Q 277.067 77.697 277.067 74.318 Q 277.067 67.259 268.619 67.259 Z M 323.213 112.956 Q 311.648 112.956 304.364 105.427 Q 297.079 97.899 297.079 85.808 Q 297.079 73.041 304.476 65.156 Q 311.873 57.271 324.077 57.271 Q 335.604 57.271 342.72 64.818 Q 349.835 72.365 349.835 84.719 Q 349.835 97.411 342.457 105.183 Q 335.079 112.956 323.213 112.956 Z M 323.739 67.709 Q 317.355 67.709 313.601 72.497 Q 309.846 77.284 309.846 85.17 Q 309.846 93.167 313.601 97.824 Q 317.355 102.48 323.438 102.48 Q 329.709 102.48 333.389 97.955 Q 337.069 93.43 337.069 85.395 Q 337.069 77.021 333.501 72.365 Q 329.934 67.709 323.739 67.709 Z M 380.478 90.652 Q 380.478 101.466 375.465 107.211 Q 370.452 112.956 360.952 112.956 Q 356.709 112.956 353.104 111.491 L 353.104 100.114 Q 356.221 102.48 360.089 102.48 Q 368.387 102.48 368.387 90.164 L 368.387 58.172 L 380.478 58.172 Z M 424.559 112.017 L 392.267 112.017 L 392.267 58.172 L 423.32 58.172 L 423.32 68.047 L 404.395 68.047 L 404.395 80.025 L 422.006 80.025 L 422.006 89.863 L 404.395 89.863 L 404.395 102.179 L 424.559 102.179 Z M 471.796 110.102 Q 465.901 112.956 456.401 112.956 Q 444.01 112.956 436.913 105.671 Q 429.817 98.387 429.817 86.259 Q 429.817 73.342 437.796 65.306 Q 445.775 57.271 458.504 57.271 Q 466.389 57.271 471.796 59.261 L 471.796 70.939 Q 466.389 67.709 459.48 67.709 Q 451.895 67.709 447.239 72.478 Q 442.583 77.247 442.583 85.395 Q 442.583 93.205 446.977 97.842 Q 451.37 102.48 458.804 102.48 Q 465.901 102.48 471.796 99.025 Z M 518.992 68.047 L 503.634 68.047 L 503.634 112.017 L 491.469 112.017 L 491.469 68.047 L 476.186 68.047 L 476.186 58.172 L 518.992 58.172 Z" transform="matrix(1.388561, 0, 0, 1.435642, 0.528885, 0.973957)" style="fill: rgb(255, 255, 255); white-space: pre;"></path>
                </g>
                </svg>
               </a>

			</div>

			<div class="card">
				<div class="d-flex text-nowrap">
					<label class="col-form-label text-end me-1">Service API URL</label>
					<input class="col-form-control form-control" type="text" id="serviceUrl" style="width:12.5rem"/>
					<label class="col-form-label text-end ms-3 me-1">Timeout</label>
					<input class="col-form-control form-control" type="number" id="serviceTimeoutSecTxt" style="width:4.5rem"/>
					<label class="col-form-label mx-1">sec</label>
					<div id="hostname" class="fw-bold ms-auto mt-2"></div>
					<div id="communication" class="mt-1 signal">
						<svg fill="#00f900" width="16px" height="16px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M10 14a1.99 1.99 0 0 0-1.981 2c0 1.104.887 2 1.981 2s1.98-.896 1.98-2c0-1.105-.886-2-1.98-2zm-4.2-2.242l1.4 1.414a3.933 3.933 0 0 1 5.601 0l1.399-1.414a5.898 5.898 0 0 0-8.4 0zM3 8.928l1.4 1.414a7.864 7.864 0 0 1 11.199 0L17 8.928a9.831 9.831 0 0 0-14 0zM.199 6.1l1.4 1.414a11.797 11.797 0 0 1 16.801 0L19.8 6.1a13.763 13.763 0 0 0-19.601 0z"></path></g></svg>						
					</div>
					<div id="serverStatus" class="fw-bold ms-1 pe-2 mt-2"></div>
	                <div id="server-version" class="mt-2"></div>
    	            <div id="colourModeToggle" onclick="toggleColourMode()" class="ms-1 mt-2" style="cursor:pointer">☀️</div>
				</div>
			</div>

			<div id="status" style="height: 1rem;"></div>

			<form method="post" action="" enctype="multipart/form-data" id="myform">
				<div class="d-flex align-content-between mt-4">

					<div style="width:600px">

						<ul class="nav nav-tabs d-flex" id="DemoTabs" role="tablist">
							<li class="nav-item d-none" id="generative-tab-listitem" data-category="Generative AI">
								<button class="nav-link" id="generative-tab" data-bs-toggle="tab" data-bs-target="#generative-panel" type="button" role="tab" aria-controls="generative" aria-selected="true">Generative AI</button>
							</li>
							<li class="nav-item d-none" id="vision-tab-listitem" data-category="Computer Vision">
								<button class="nav-link active" id="vision-tab" data-bs-toggle="tab" data-bs-target="#vision-panel" type="button" role="tab" aria-controls="vision" aria-selected="true">Vision</button>
							</li>
							<li class="nav-item d-none" id="image-tab-listitem" data-category="Image Processing">
								<button class="nav-link" id="image-tab" data-bs-toggle="tab" data-bs-target="#image-panel" type="button" role="tab" aria-controls="image" aria-selected="true">Image</button>
							</li>
							<li class="nav-item d-none" id="face-tab-listitem" data-category="Face Recognition">
								<button class="nav-link" id="face-tab" data-bs-toggle="tab" data-bs-target="#face-panel" type="button" role="tab" aria-controls="face" aria-selected="false">Face</button>
							</li>
							<li class="nav-item d-none" id="sound-tab-listitem" data-category="Computer Audition">
								<button class="nav-link" id="sound-tab" data-bs-toggle="tab" data-bs-target="#sound-panel" type="button" role="tab" aria-controls="sound" aria-selected="true">Sound</button>
							</li>
							<li class="nav-item d-none" id="text-tab-listitem" data-category="Natural Language">
								<button class="nav-link" id="text-tab" data-bs-toggle="tab" data-bs-target="#text-panel" type="button" role="tab" aria-controls="text" aria-selected="false">Text</button>
							</li>
							<li class="nav-item d-none" id="demo-tab-listitem" data-category="Demo Modules">
								<button class="nav-link" id="demo-tab" data-bs-toggle="tab" data-bs-target="#demo-panel" type="button" role="tab" aria-controls="demo" aria-selected="true">Demos</button>
							</li>
							<li class="nav-item d-none" id="other-tab-listitem" data-category="Other">
								<button class="nav-link" id="other-tab" data-bs-toggle="tab" data-bs-target="#other-panel" type="button" role="tab" aria-controls="other" aria-selected="true">Other</button>
							</li>

							<li class="nav-item d-none" id="video-tab-listitem" data-category="Video Processing">
								<button class="nav-link" id="video-tab" data-bs-toggle="tab" data-bs-target="#video-panel" type="button" role="tab" aria-controls="video" aria-selected="false">Video</button>
							</li>

							<li class="nav-item d-none" id="train-tab-listitem" data-category="Training">
								<button class="nav-link" id="train-tab" data-bs-toggle="tab" data-bs-target="#train-panel" type="button" role="tab" aria-controls="train" aria-selected="false">Train</button>
							</li>

							<li class="nav-item ms-auto" id="benchmark-tab-listitem" data-category="Benchmarking">
								<button class="nav-link" id="benchmark-tab" data-bs-toggle="tab" data-bs-target="#benchmark-panel" type="button" role="tab" aria-controls="benchmark" aria-selected="false">Benchmark</button>
							</li>
						</ul>

						<div class="tab-content" id="DemoTabsContent">

							<div class="tab-pane fade show" id="generative-panel" data-category="Generative AI" role="tabpanel" aria-labelledby="generative-tab">
							</div>

							<div class="tab-pane fade show active" id="vision-panel" data-category="Computer Vision" role="tabpanel" aria-labelledby="vision-tab">
							</div>

							<div class="tab-pane fade show" id="image-panel" data-category="Image Processing" role="tabpanel" aria-labelledby="image-tab">
							</div>

							<div class="tab-pane fade show" id="face-panel" data-category="Face Recognition" role="tabpanel" aria-labelledby="face-tab">
							</div>

							<div class="tab-pane fade show" id="sound-panel" data-category="Computer Audition" role="tabpanel" aria-labelledby="sound-tab">
							</div>

							<div class="tab-pane fade show" id="text-panel" data-category="Natural Language" role="tabpanel" aria-labelledby="text-tab">
							</div>

							<div class="tab-pane fade show" id="demo-panel" data-category="Demo Modules" role="tabpanel" aria-labelledby="demo-tab">
							</div>

							<div class="tab-pane fade show" id="other-panel" data-category="Other" role="tabpanel" aria-labelledby="other-tab">
							</div>

							<div class="tab-pane fade show" id="video-panel" data-category="Video Processing" role="tabpanel" aria-labelledby="video-tab">

								<div class="card mt-3">

									<div class="d-flex justify-content-between">
										<input class="btn btn-success" type="button" value="Start"
											   onclick="onStartVideo()" style="width:5rem">
										<input class="btn btn-secondary me-auto" type="button" value="Stop"
											   onclick="onStopVideo()" style="width:5rem">
										<!--
				<input class="btn btn-light" id="videoInput" type="file" style="width:10rem"
					onchange="return previewVideo(this)" />
				-->
									</div>
									<video id="video" style="width:100%;height:480px;display:none" autoplay></video>
									<canvas id="canvas"></canvas>

								</div>
							</div>

							<div class="tab-pane fade show" id="train-panel" data-category="Training" role="tabpanel" aria-labelledby="train-tab">
							</div>

							<div class="tab-pane fade show" id="benchmark-panel" data-category="Benchmarking" role="tabpanel" aria-labelledby="benchmark-tab">

								<div class="card mt-3 objectdetection_queue">
									<div class="card-header h3">Benchmark</div>
									<div class="card-body">

										<div class="form-group row">
											<label class="col-form-label col-2">Image</label>
											<input class="col form-control btn-light" id="benchmarkInput"
												   type="file" style="width:17rem" onchange="return previewImage(this)" />
										</div>
										<div class="form-group d-flex mt-2">
                                            <label class="col-form-label col-2">Mode</label>
                                            <div class="form-check form-check-inline mt-2">
                                                <input class="form-check-input" type="radio" name="benchmarkMode" id="benchmarkModeDetection" value="detection" checked onchange="toggleModelSelection()">
                                                <label class="form-check-label" for="benchmarkModeDetection">Object Detection</label>
                                            </div>
                                            <div class="form-check form-check-inline mt-2">
                                                <input class="form-check-input" type="radio" name="benchmarkMode" id="benchmarkModeALPR" value="alpr" onchange="toggleModelSelection()">
                                                <label class="form-check-label" for="benchmarkModeALPR">License Plate Recognition</label>
                                            </div>
										</div>
										<div class="form-group d-flex justify-content-end mt-2">
											<label class="col-form-label col-2">Model</label>
											<select id="benchmarkModel" class="form-select me-5">
												<option value="">Standard model</option>
												<option value="round-trip">No inference: round-trip speed test only</option>
											</select>
											<input class="form-control btn-success" type="button" value="Go" style="width:7rem"
												   id="on-benchmark"
												   onclick="onBenchmark(benchmarkInput, benchmarkModel.value, benchmarkParallelism.value)" />
										</div>
										<div class="form-group d-flex flex-nowrap mt-2">
											<label class="form-label col-2">Parallel</label>
											<div class="col-8">
												<input type="range" id="benchmarkParallelism" class="tight w-100 mx-2"
													   min="1" max="8" steps="1" value="8"
													   onchange="updateBenchmarkParallelismLabel(this, 'benchmarkParallelismLabel')">
											</div>
											<div class="col-2 text-center" id="benchmarkParallelismLabel">8</div>
										</div>
									</div>
								</div>

							</div>

						</div>

					</div>

					<div class="ms-4 mt-3 position-sticky" style="width:475px;">
						<div id="results" class="w-100 mb-3 bg-white border-1 border-light p-1 text-black rounded"
							 style="height: 195px; overflow-y: auto;"></div>

						<div class="w-100 position-relative border-1 border-light my-2">
							<audio id="sndPreview" controls class="w-100">
								<source src="" type="audio/wav">
								Your browser does not support the audio element.
							</audio>
						</div>

						<div class="w-100 position-relative border-1 border-light mb-4 ">
							<div id="imgMask" class="position-absolute"
								 style="left:0;top:0;pointer-events:none;z-index:10"></div>
							<img src="" id="imgPreview" class="w-100" style="height:250px;visibility:hidden">
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>

	<script src="assets/bootstrap.bundle.min.js"></script>
	<script>
		let triggerTabList = [].slice.call(document.querySelectorAll('#DemoTabs button'))
		triggerTabList.forEach(function (triggerEl) {
			let tabTrigger = new bootstrap.Tab(triggerEl)

			triggerEl.addEventListener('click', function (event) {
				event.preventDefault()
				tabTrigger.show()
			})
		})

        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
	</script>

</body>
</html>